<template>
  <view class="add_account">
    <view class="bg-fff pd_l_30 pd_r_30">
      <u-form ref="uForm" :model="form">
        <u-form-item label="账户类型" right-icon="arrow-right" label-width="170">
          <view @click="show = true">
            {{accountTypeData[form.type - 1].text}}
          </view>
          <u-action-sheet :list="accountTypeData" v-model="show" @click="actionSheetCallback"></u-action-sheet>
        </u-form-item>
      </u-form>
    </view>
    <view class="bg-fff mg_t_10 pd_l_30 pd_r_30" v-if="form.type == 1">
      <u-form ref="uForm" :model="form">
        <u-form-item label="持卡人" label-width="170">
          <u-input type="text" v-model="form.name" placeholder="请输入持卡人姓名"/>
        </u-form-item>
        <u-form-item label="银行类别" label-width="170" right-icon="arrow-right">
          <view @click="bankShow=true">{{form.bankCategory || '选择银行'}}</view>
          <u-select v-model="bankShow" mode="single-column" :list="bankCardData" @confirm="actionSheetCallback1"></u-select>
        </u-form-item>
        <u-form-item label="开户行" label-width="170" >
          <u-input type="text" v-model="form.accountBank" placeholder="请输入开户行"/>
        </u-form-item>
        <u-form-item label="卡号" label-width="170" >
          <u-input type="text" v-model="form.accountNo" placeholder="请输入卡号"/>
        </u-form-item>
      </u-form>
    </view>
    <view class="bg-fff mg_t_10 pd_l_30 pd_r_30" v-if="form.type == 2">
      <u-form ref="uForm" :model="form">
        <u-form-item label="姓名" label-width="170">
          <u-input type="text" v-model="form.name" placeholder="请输入实名认证的支付宝账号姓名"/>
        </u-form-item>
        <u-form-item label="支付宝账号" label-width="170" >
          <u-input type="text" v-model="form.accountNo" placeholder="请输入支付宝账号"/>
        </u-form-item>
        <u-form-item label="手机号" label-width="170" >
          <u-input type="number" v-model="form.phone" placeholder="请输入支付宝绑定的手机号"/>
        </u-form-item>
      </u-form>
    </view>
    <div class="bg-fff btn-container pd_t_19 pd_b_20">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="save">保存</u-button>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";
  import {THEME} from "../mixins/config";

  export default {
    onLoad() {
      // 监听事件
      uni.$on('account_info', data => {
        this.form = data.info
        if (data.info.id) {
        	uni.setNavigationBarTitle({
            title: '修改账户信息'
          });
        }
      })
    },

    onUnload() {
      // 移除监听事件
      uni.$off('account_info')
    },

    data() {
      return {
        form: {type:1},
        customStyle: {
          background: THEME.btn_active_bg_color,
          padding: '0 30rpx'
        },
	      accountTypeData: [
		      {
			      'id': '1',
			      'text': '银行卡',
		      }, {
			      'id': '2',
			      'text': '支付宝',
		      }
        ],
        show: false,
        bankCardData: [
	        {
		        'id': 1,
		        'label': '中国工商银行',
	        }, {
		        'id': 2,
		        'label': '中国建设银行',
	        }, {
		        'id': 3,
		        'label': '中国邮政储蓄银行',
	        }, {
		        'id': 4,
		        'label': '中国银行',
	        }, {
		        'id': 5,
		        'label': '招商银行',
	        }, {
		        'id': 6,
		        'label': '交通银行',
	        }, {
		        'id': 7,
		        'label': '中信银行',
	        }, {
		        'id': 8,
		        'label': '平安银行',
	        }, {
		        'id': 9,
		        'label': '浦发银行',
	        }, {
		        'id': 10,
		        'label': '重庆银行',
	        }
        ],
        bankShow: false
      }
    },
    methods: {
      actionSheetCallback(res) {
        this.form.type = res + 1
      },
      actionSheetCallback1(res) {
        this.form.bankCategory = res[0].label
      },

      save() {
      	var that_ = this
      	request({
          url: '/app/userCenter/saveAccount',
          method: 'post',
          data: that_.form
        }).then(ret => {
        	TOAST('保存成功');
            setTimeout(function () {
              uni.navigateBack()
            },500)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .add_account {
    background: #f7f7f7;
    padding-bottom: 120upx;
    height: 100%;
    .btn-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-left: 30upx;
      padding-right: 30upx;
      box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
    }
  }
</style>
